<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link href="../../static/dish/css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../../static/dish/js/jquery.js"></script>

    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../../static/user/css/font.css">
    <link rel="stylesheet" href="../../static/user/css/font.css">
    <link rel="stylesheet" href="../../static/user/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="../../static/user/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../static/user/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9-->
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <script language="javascript">
        $(function(){
            //导航切换
            $(".imglist li").click(function(){
                $(".imglist li.selected").removeClass("selected")
                $(this).addClass("selected");
            })
        })
    </script>

    <style>
        #showImg {
            width: 168px;
            height: 120px;
        }
    </style>
</head>


<body>
    <ul class="imglist" id="menu">
    </ul>

        <div style="text-align: center;  text-align: center; line-height: 20px; font-size: 18px">
            房间ID <input style="text-align: center; width: 150px; height: 20px; line-height: 20px; padding-bottom: 20px; padding-right: 200px;" type="text" id="roomId" name="roomId" placeholder="请输入房间Id">
        </div>
        <div style="text-align: center; padding-bottom: 20px; padding-right: 200px; font-size: 20px">
            订单价格：<span id="price" style="color: red; font-size: 20px; display: inline"></span>
        </div>

    <div style="text-align: center; padding-bottom: 20px; padding-right: 200px">
        <button style="width:100px; height:50px; background-color: #ff9b57; border-radius: 10px; color: white" type="button" onclick="submit_Order()">确认提交</button>
    </div>
</div>
</body>

<script>
    $(document).ready(init());

    function init() {
        let price = 0;
        let arr = JSON.parse(localStorage.getItem("arr"));
        let dishList = JSON.parse(localStorage.getItem("dishList"));
        let str = '';
        console.log(arr);
        for(let i = 0; i < dishList.length; i++) {
            if(arr[i] === 0) continue;
            let u = dishList[i];
            let dishName = '<img id="showImg" src="../../static/dish/images/menu/' + u.dishName + '.jpg"/>';
            str += '<li>' +
                '<span>' + dishName + '</span>' +
                '<h2>'  + u.dishName + '  价格:' + u.dishPrice + '</h2>' +
                '<h2 href="#"> 数量：' + arr[i] + '</h2>' +
                '</p>' +
                '</li>';
            price += arr[i] * u.dishPrice;
        }


        $('#price').text(price);
        $('#menu').html(str);
    }

    //添加一个订单信息
    function add(id, dishName) {
        $.ajax({
            url: "../dish-order/add",
            dataType: "json",
            type: "post",
            data: {
                dishId: id,
                roomOrderId: $("#roomId").val(),
                dishName: dishName
            }
        });
    }

    function submit_Order() {
        let arr = JSON.parse(localStorage.getItem("arr"));
        let dishList = JSON.parse(localStorage.getItem("dishList"));
        for(let i = 0; i < dishList.length; i++) {
            let u = dishList[i];
            for(let j = 0; j < arr[i]; j++) {
                add(u.dishId, u.dishName);
            }
        }
        layer.alert('增加成功',{icon:6},function () {
            let index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
            parent.location.reload();
        })
    }
</script>
</html>
